<template>
  <view class="container">
    <yh_input label="项目名称" placeholder="请输入" v-model="projectName" />
    <yh_input
      label="项目类型"
      placeholder="请选择"
      :disabled="true"
      :image="true"
      v-model="projectType"
      @click="handleSelectClick('projectType', true)"
    />
    <yh_input
      label="建筑面积(㎡)"
      placeholder="(选填)请输入"
      style="margin-top: 7px"
      v-model="buildingArea"
    />
    <yh_input
      label="桥梁长度(米)"
      placeholder="(选填)请输入"
      v-model="bridgeLength"
    />
    <yh_input
      label="管道隧道长度(米)"
      placeholder="请输入"
      v-model="pipeLength"
    />
    <yh_input
      label="建筑类型"
      placeholder="请选择"
      :disabled="true"
      :image="true"
      v-model="buildingType"
      @click="handleSelectRightClick('buildingType', true)"
    />
    <yh_input
      label="业务类别"
      placeholder="请选择"
      :disabled="true"
      :image="true"
      v-model="businessType"
      @click="handleSelectClick('businessType', true)"
    />
    <yh_input
      label="预计使用材料"
      placeholder="请选择"
      :disabled="true"
      :image="true"
      v-model="preUserMaterial"
      @click="handleSelectRightClick('preUserMaterial', true)"
    />
    <yh_input
      label="销售类型"
      placeholder="请选择"
      :disabled="true"
      :image="true"
      v-model="saleType"
      @click="handleSelectClick('saleType', true)"
    />
    <yh_input
      label="项目合作性质"
      placeholder="请选择"
      :disabled="true"
      :image="true"
      v-model="projectCooperationType"
      @click="handleSelectClick('projectCooperationType', true)"
    />
    <yh_input
      label="所在地区"
      placeholder="请选择省市区"
      :disabled="true"
      :image="true"
      @click="showAddress"
      v-model="addressStr"
    />
    <yh_input
      label="详细地址"
      placeholder="请输入"
      :locationIconState="true"
      v-model="detailedAddress"
    />
    <view class="submit_button">
      <nut-button
        class=""
        size="large"
        type="primary"
        shape="square"
        color="#DC2734"
        @click="handleGo('/pages/project/approval/index')"
        >去立项
      </nut-button>
    </view>
    <!-- 右边draw开始 -->
    <yh_right_draw
      v-model="selectRightShow"
      :selectedRightOption="selectedRightOption"
      :handleSelect="handleSelect"
      :reset="reset"
    />
    <!-- 右边draw结束 -->
    <!-- 地址开始 -->
    <yh_address :close="close" v-model="showPopup" />
    <!-- 地址结束 -->
    <!-- 下面弹出选择框开始 -->
    <yh_bottom_select
      v-model="selectShow"
      :handOptionsSelected="handOptionsSelected"
      :selectedOptions="selectedOptions"
    />
    <!-- 下面弹出选择框结束 -->
  </view>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import Taro from "@tarojs/taro";
import yh_input from "@/components/yh-input.vue";
import yh_address from "@/components/yh-select-address.vue";
import yh_bottom_select from "@/components/yh-bottom-select.vue";
import yh_right_draw from "@/components/yh-right-draw.vue";

export default {
  name: "project-report",
  components: { yh_input, yh_address, yh_bottom_select, yh_right_draw },
  setup() {
    const state = reactive({
      projectName: "", //项目名称
      projectType: "", //项目类别
      buildingArea: "", //建筑面积
      bridgeLength: "", //桥梁长度
      pipeLength: "", //管道隧道长度
      buildingType: "", //建筑类型
      businessType: "", //业务类型
      preUserMaterial: "", //预计使用材料
      saleType: "", //销售类型
      projectCooperationType: "", //合作项目性质
      addressStr: "", //所在地区
      detailedAddress: "", //详细地址
      selectShow: false, //底部弹框显示状态
      selectOptions: {
        projectType: {
          type: "projectType",
          name: "项目类型",
          list: ["新建", "改建", "扩建"],
        },
        businessType: {
          type: "businessType",
          name: "业务类别",
          list: ["建筑粉料", "建筑防水/建筑修缮", "节能保温"],
        },
        saleType: {
          type: "saleType",
          name: "销售类型",
          list: ["材料销售", "包工包料", "包清工"],
        },
        projectCooperationType: {
          type: "projectCooperationType",
          name: "项目合作性质",
          list: ["一般项目", "集采客户立项", "集采单体项目"],
        },
      },
      selectedOptions: {},
    });

    const architecture = reactive({
      selectRightShow: false,
      selectRightOptions: {
        buildingType: {
          title: "选择建筑类型",
          list: [
            {
              type: "instruction",
              checked: false,
              open: false,
              name: "工业建筑",
              list: [
                {
                  name: "厂房",
                  checked: "false",
                },
                {
                  name: "水塔",
                  checked: "false",
                },
                {
                  name: "冷凝塔",
                  checked: "false",
                },
              ],
            },
            {
              open: true,
              checked: true,
              type: "office",
              name: "业务类别",
              list: [
                {
                  name: "大使馆",
                  checked: "false",
                },
                {
                  name: "政府办公",
                  checked: "false",
                },
                {
                  name: "自建大楼",
                  checked: "false",
                },
                {
                  name: "银行",
                  checked: "false",
                },
              ],
            },
          ],
        },
        preUserMaterial: {
          title: "选择预计使用材料",
          list: [
            {
              type: "instruction",
              checked: false,
              open: false,
              name: "挤塑板(XPS)",
              list: [
                {
                  name: "卧牛山",
                  checked: "false",
                },
                {
                  name: "孚达",
                  checked: "false",
                },
              ],
            },
            {
              open: true,
              checked: true,
              type: "office",
              name: "涂保一体化",
              list: [
                {
                  name: "卧牛山+德爱威涂料",
                  checked: "false",
                },
                {
                  name: "孚达+德爱威涂料",
                  checked: "false",
                },
                {
                  name: "越大+德爱威涂料",
                  checked: "false",
                },
                {
                  name: "卧牛山+其它品牌涂料",
                  checked: "false",
                },
                {
                  name: "卧牛山+其它品牌涂料",
                  checked: "false",
                },
                {
                  name: "卧牛山+其它品牌涂料",
                  checked: "false",
                },
              ],
            },
          ],
        },
      },
      selectedRightOption: {},
    });

    //展示地址弹框
    const showPopup = ref(false);
    const showAddress = () => {
      showPopup.value = !showPopup.value;
    };
    const close = (val) => {
      state.addressStr = val.data.addressStr;
    };
    // 展示底部弹框
    const handleSelectClick = (
      options: string,
      selectShow: boolean = false
    ) => {
      state.selectedOptions = state.selectOptions[options];
      state.selectShow = selectShow;
    };
    const handOptionsSelected = (
      selectedValue: string,
      selectedOptionName: string
    ) => {
      state.selectShow = false;
      state[selectedOptionName] = selectedValue;
      console.log("selectedValue is :" + selectedValue);
    };

    //展示右侧弹框
    const handleSelectRightClick = (
      options: string,
      selectRightShow: boolean = false
    ) => {
      architecture.selectedRightOption =
        architecture.selectRightOptions[options];
      architecture.selectRightShow = selectRightShow;
    };
    const handleSelect = () => {};
    const reset = () => {};

    const handleGo = (url: string) => {
      console.log(state);
      Taro.navigateTo({
        url: url,
      });
    };
    return {
      showPopup,
      showAddress,
      close,
      ...toRefs(state),
      ...toRefs(architecture),
      handleSelectClick,
      handOptionsSelected,
      handleSelectRightClick,
      handleGo,
      handleSelect,
      reset,
    };
  },
};
</script>

<style lang="scss">
</style>
